<template>
	<view>
		<u-navbar placeholder fixed autoBack border title="专户详情"></u-navbar>
		<view class="d-p-30" v-if="info">
			<view class="sub-title d-font-32" style="color: #151C24;font-weight: bold;">专户信息详情</view>
			<view class="d-flex item u-border-bottom">
				<view class="label">项目名称</view>
				<view class="d-font-28 d-flex-1 d-text-right d-p-l-30">{{ info.xmmc || '无数据源' }}</view>
			</view>
			<view class="d-flex item u-border-bottom">
				<view class="label">建设单位</view>
				<view class="d-font-28 d-flex-1 d-text-right d-p-l-30">{{ info.jsdwmc || '无数据源' }}</view>
			</view>
			<view class="d-flex item u-border-bottom">
				<view class="label">建设单位负责人</view>
				<view class="d-font-28 d-flex-1 d-text-right d-p-l-30">{{ info.qyprincipal || '无数据源' }}</view>
			</view>
			<view class="d-flex item u-border-bottom">
				<view class="label d-flex-1">联系电话</view>
				<view class="d-font-28">
					<u--text mode="phone" :customStyle="{ fontWeight: 'bold' }" color="#21A5F3" :text="info.jsdwlxdh || '无数据源'" size="28rpx" :call="true"></u--text>
				</view>
			</view>
			<view class="d-flex item u-border-bottom">
				<view class="label">施工单位负责人</view>
				<view class="d-font-28 d-flex-1 d-text-right d-p-l-30">{{ info.sgdwprincipal || '无数据源' }}</view>
			</view>
			<view class="d-flex item u-border-bottom">
				<view class="label d-flex-1">联系电话</view>
				<view class="d-font-28">
					<u--text mode="phone" :customStyle="{ fontWeight: 'bold' }" color="#21A5F3" :text="info.sgdwlxdh || '无数据源'" size="28rpx" :call="true"></u--text>
				</view>
			</view>
			<view class="d-flex item u-border-bottom">
				<view class="label">专用账户名称</view>
				<view class="d-font-28 d-flex-1 d-text-right d-p-l-30">{{ info.zhmc || '无数据源' }}</view>
			</view>
			<view class="d-flex item u-border-bottom">
				<view class="label">开户类型</view>
				<view class="d-font-28 d-flex-1 d-text-right d-p-l-30">{{ info.khlx || '无数据源' }}</view>
			</view>
			<view class="d-flex item u-border-bottom">
				<view class="label">开户银行</view>
				<view class="d-font-28 d-flex-1 d-text-right d-p-l-30">{{ info.khh || '无数据源' }}</view>
			</view>
			<view class="d-flex item u-border-bottom">
				<view class="label">专用账户账号</view>
				<view class="d-font-28 d-flex-1 d-text-right d-p-l-30">{{ info.zhhm || '无数据源' }}</view>
			</view>
			<view class="d-flex item u-border-bottom">
				<view class="label">专用账户状态</view>
				<view class="d-font-28 d-flex-1 d-text-right d-p-l-30">{{ info.zhzt || '无数据源' }}</view>
			</view>
			<view class="d-flex item u-border-bottom">
				<view class="label">开户行地址</view>
				<view class="d-font-28 d-flex-1 d-text-right d-p-l-30">{{ info.bankaddress || '无数据源' }}</view>
			</view>
			<view class="d-flex item u-border-bottom">
				<view class="label">项目工程合同额</view>
				<view class="d-font-28 d-flex-1 d-text-right d-p-l-30">{{ info.projectcost || '无数据源' }}</view>
			</view>
			<view class="d-flex item u-border-bottom">
				<view class="label">工资拨付比例</view>
				<view class="d-font-28 d-flex-1 d-text-right d-p-l-30">{{ info.payratio || '无数据源' }}</view>
			</view>
			<view class="d-flex item u-border-bottom">
				<view class="label">工资拨付总额</view>
				<view class="d-font-28 d-flex-1 d-text-right d-p-l-30">{{ info.paytotal || '无数据源' }}</view>
			</view>
			<view class="d-flex item u-border-bottom">
				<view class="label">计划拨付期数</view>
				<view class="d-font-28 d-flex-1 d-text-right d-p-l-30">{{ info.paytimes || '无数据源' }}</view>
			</view>
			<view class="d-flex item u-border-bottom">
				<view class="label">第一期拨付年月</view>
				<view class="d-font-28 d-flex-1 d-text-right d-p-l-30">{{ info.starttime || '无数据源' }}</view>
			</view>
			<view class="d-flex item u-border-bottom">
				<view class="label">末期支付年月</view>
				<view class="d-font-28 d-flex-1 d-text-right d-p-l-30">{{ info.endtime || '无数据源' }}</view>
			</view>
			<view class="d-flex item u-border-bottom">
				<view class="label">拨付类型</view>
				<view class="d-font-28 d-flex-1 d-text-right d-p-l-30">{{ info.payment || '无数据源' }}</view>
			</view>
			<view class="d-flex item u-border-bottom">
				<view class="label">每月应付金额</view>
				<view class="d-font-28 d-flex-1 d-text-right d-p-l-30">{{ info.paytotalbymonth || '无数据源' }}</view>
			</view>
			<view class="d-flex item u-border-bottom">
				<view class="label">每月拨付日期</view>
				<view class="d-font-28 d-flex-1 d-text-right d-p-l-30">{{ info.paytime || '无数据源' }}</view>
			</view>
			<view class="d-flex item u-border-bottom">
				<view class="label">工资发放日</view>
				<view class="d-font-28 d-flex-1 d-text-right d-p-l-30">{{ info.payday || '无数据源' }}</view>
			</view>

			<view class="sub-title d-font-32 d-m-t-40" style="color: #151C24;font-weight: bold;">专户概况</view>
			<view class="d-flex item u-border-bottom">
				<view class="label">累积拨付金额</view>
				<view class="d-font-28 d-flex-1 d-text-right d-p-l-30">{{ info.ado.cumsfgzhj || '无数据源' }}</view>
			</view>
			<view class="d-flex item u-border-bottom">
				<view class="label">累积发放金额</view>
				<view class="d-font-28 d-flex-1 d-text-right d-p-l-30">{{ info.ado.cumsjbfje || '无数据源' }}</view>
			</view>
			<view class="d-flex item u-border-bottom">
				<view class="label">专户余额</view>
				<view class="d-font-28 d-flex-1 d-text-right d-p-l-30">{{ info.balance || '无数据源' }}</view>
			</view>

			<view class="sub-title d-font-32 d-m-t-40" style="color: #151C24;font-weight: bold;">拨付信息列表</view>
			<view class="d-flex item u-border-bottom">
				<view class="label">拨付期数</view>
				<view class="d-font-28 d-flex-1 d-text-right d-p-l-30">{{ info.adp.bfqs || '无数据源' }}</view>
			</view>
			<view class="d-flex item u-border-bottom">
				<view class="label">拨付金额</view>
				<view class="d-font-28 d-flex-1 d-text-right d-p-l-30">{{ info.adp.sjbfje || '无数据源' }}</view>
			</view>
			<view class="d-flex item u-border-bottom">
				<view class="label">拨付日期</view>
				<view class="d-font-28 d-flex-1 d-text-right d-p-l-30">{{ info.adp.bfsj || '无数据源' }}</view>
			</view>

			<view class="sub-title d-font-32 d-m-t-40" style="color: #151C24;font-weight: bold;">工资发放情况</view>
			<view class="d-flex item u-border-bottom">
				<view class="label">工资期（间）</view>
				<view class="d-font-28 d-flex-1 d-text-right d-p-l-30">{{ info.ads.ffgzny || '无数据源' }}</view>
			</view>
			<view class="d-flex item u-border-bottom">
				<view class="label">发放日期</view>
				<view class="d-font-28 d-flex-1 d-text-right d-p-l-30">{{ info.ads.createTime || '无数据源' }}</view>
			</view>
			<view class="d-flex item u-border-bottom">
				<view class="label">实发人数</view>
				<view class="d-font-28 d-flex-1 d-text-right d-p-l-30">{{ info.ads.staffs || '无数据源' }}</view>
			</view>
			<view class="d-flex item u-border-bottom">
				<view class="label">实发金额</view>
				<view class="d-font-28 d-flex-1 d-text-right d-p-l-30">{{ info.ads.sfgzhj || '无数据源' }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { accountDetail } from '../../../common/api.js';
export default {
	data() {
		return {
			id: null,
			info: null
		};
	},
	onLoad(e) {
		this.id = e.id;
		this.init();
	},
	methods: {
		init() {
			accountDetail({
				params: {
					id: this.id
				}
			}).then(e => {
				this.info = e.data;
			});
		}
	}
};
</script>

<style lang="scss">
.item {
	height: 100rpx;
	.label {
		font-size: 30rpx;
		font-weight: 400;
		color: #5d6672;
	}
}
.item-min {
	height: 60rpx;
	.label {
		font-size: 28rpx;
		color: #5d6672;
	}
	.val {
		font-weight: bold;
	}
}
.table {
	font-size: 28rpx;
	display: table;
	width: 100%;
	vertical-align: middle;
	border: 1px solid #f6f7f8;
	.tr {
		display: table-row;
		.th,
		.td {
			display: table-cell;
			height: 80rpx;
			vertical-align: middle;
		}
		.th {
			font-weight: bold;
			color: #162233;
		}
		&:nth-child(2n-1) {
			background-color: #f6f7f8;
		}
	}
}
</style>
